
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
<div class="archive_info">
<h1>CSS <span class="color_h1">语法</span>
</h1>
<hr/>
<h2>实例</h2>
<ul>
<li>查看 <a  rel="noopener noreferrer" target="_blank">实例 1</a>
</li>
<li>查看 <a  rel="noopener noreferrer" target="_blank">实例 2</a>
</li>
</ul>
<hr/>
<h2>CSS 实例</h2>
<p>CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:</p>
<p><img decoding="async" src="//www.runoob.com/wp-content/uploads/2013/07/632877C9-2462-41D6-BD0E-F7317E4C42AC.jpg" style="margin:0px"/></p>
<p>选择器通常是您需要改变样式的 HTML 元素。</p>
<p>每条声明由一个属性和一个值组成。</p>
<p>属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。</p>
<hr/>
<h2>CSS 实例</h2>
<p>CSS声明总是以分号 <span class="marked">;</span> 结束，声明总以大括号 <span class="marked">{}</span> 括起来:</p>
<pre>p {color:red;text-align:center;}</pre>
<p>为了让CSS可读性更强，你可以每行只描述一个属性:</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-identifier">p</span><span class="hl-code">
</span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">color:</span><span class="hl-var">red</span><span class="hl-reserved"></span><span class="hl-code">;
    </span><span class="hl-reserved">text-align:</span><span class="hl-string">center</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span></div>
</div>
<br/><a class="tryitbtn"  rel="noopener noreferrer" target="_blank">尝试一下 »</a>
</div>
<br/><hr/>
<h2>CSS 注释</h2>
<p>注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。</p>
<p>CSS注释以 <span class="marked">/*</span> 开始, 以  <span class="marked">*/</span> 结束, 实例如下:</p>
<div class="example"><h2 class="example">实例</h2> <div class="example_code"><div class="hl-main"><span class="hl-comment">/*</span><span class="hl-comment">这是个注释</span><span class="hl-comment">*/</span><span class="hl-code">
</span><span class="hl-identifier">p</span><span class="hl-code">
</span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">text-align:</span><span class="hl-string">center</span><span class="hl-reserved"></span><span class="hl-code">;
    </span><span class="hl-comment">/*</span><span class="hl-comment">这是另一个注释</span><span class="hl-comment">*/</span><span class="hl-code">
</span><span class="hl-reserved">color:</span><span class="hl-var">black</span><span class="hl-reserved"></span><span class="hl-code">;
    </span><span class="hl-reserved">font-family:</span><span class="hl-code">arial</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span></div></div></div> <div class="scroll-top"><a >返回顶部</a></div>
</div>

    </body>
    </html>
    